<!doctype html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
  <!-- 基础 SEO Meta 标签 -->
  <title>SyntaxSeed - 开发者成长日志 | 前端技术分享</title>
  <meta name="description" content="记录前端开发学习历程，分享技术心得与项目经验。专注于 Vue.js、React、TypeScript 等现代前端技术栈。" />
  <meta name="keywords" content="前端开发,Vue.js,React,TypeScript,JavaScript,技术博客,开发者,编程学习" />
  <meta name="author" content="SyntaxSeed" />
  <meta name="robots" content="index,follow" />
  <meta name="googlebot" content="index,follow" />

  <!-- Open Graph Meta 标签 -->
  <meta property="og:title" content="SyntaxSeed - 开发者成长日志" />
  <meta property="og:description" content="记录前端开发学习历程，分享技术心得与项目经验。专注于 Vue.js、React、TypeScript 等现代前端技术栈。" />
  <meta property="og:type" content="website" />
  <meta property="og:url" content="https://syntaxseed.com" />
  <meta property="og:image" content="/logo.svg" />
  <meta property="og:site_name" content="SyntaxSeed" />
  <meta property="og:locale" content="zh_CN" />

  <!-- Twitter Card Meta 标签 -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content="SyntaxSeed - 开发者成长日志" />
  <meta name="twitter:description" content="记录前端开发学习历程，分享技术心得与项目经验。专注于 Vue.js、React、TypeScript 等现代前端技术栈。" />
  <meta name="twitter:image" content="/logo.svg" />

  <!-- 主题颜色和图标 -->
  <meta name="theme-color" content="#2a9d8f" />
  <meta name="msapplication-TileColor" content="#2a9d8f" />
  <link rel="icon" type="image/svg+xml" href="/logo.svg" />
  <link rel="apple-touch-icon" href="/logo.svg" />
  <link rel="manifest" href="/manifest.json" />

  <!-- Canonical URL -->
  <link rel="canonical" href="https://syntaxseed.com" />

  <!-- DNS 预解析 -->
  <link rel="dns-prefetch" href="https://fonts.googleapis.com" />
  <link rel="dns-prefetch" href="https://fonts.gstatic.com" />

  <!-- 预连接重要资源 -->
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

  <!-- 字体加载优化 -->
  <link
    href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Open+Sans:wght@400;500;600&family=Fira+Code:wght@400;500&display=swap"
    rel="stylesheet" />

  <!-- 结构化数据 - 网站基本信息 -->
  <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "WebSite",
      "name": "SyntaxSeed",
      "description": "记录前端开发学习历程，分享技术心得与项目经验",
      "url": "https://syntaxseed.com",
      "author": {
        "@type": "Person",
        "name": "SyntaxSeed"
      },
      "potentialAction": {
        "@type": "SearchAction",
        "target": "https://syntaxseed.com/blog?search={search_term_string}",
        "query-input": "required name=search_term_string"
      }
    }
    </script>
</head>

<body class="bg-bg-light dark:bg-bg-dark transition-colors duration-300">
  <div id="app"></div>
  <script type="module" src="/src/main.js"></script>
</body>

</html>